<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <div class="content">
      <div class="header">
        <ul class="headerTitle">
          <li class="li_lb">
          </li>
          <li class="li_rb">
            <p class="liText">
              <el-button type="primary" @click="todaySubmit">日报</el-button>
            </p>
          </li>
          <li class="li_yb">
            <p class="liText">
              <el-button type="primary" @click="monthSubmit">月报</el-button>
            </p>
          </li>
          <li class="li_nb">
            <p class="liText">
              <el-button type="primary" @click="yearSubmit">年报</el-button>
            </p>
          </li>
          <li class="li_cx">
            <p class="liText">
              <el-button type="primary" @click="datacountList">查询</el-button>
            </p>
          </li>
          <li class="li_tb">
            <p class="liText">
              <el-button type="primary">图表</el-button>
            </p>
          </li>
          <li class="li_dc">
            <p class="liText" @click="exportElex">
              <el-button type="primary" >导出表格</el-button>
            </p>
          </li>
        </ul>
      </div>

      <!--<div class="list">-->
      <!--<p class="list_title">-->
      <!--<router-link to="store"> 综合报表</router-link>-->
      <!--</p>-->
      <!--<h3 class="list_titleItem_Title"><a href="">房源统计报表</a></h3>-->
      <!--<ul>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">出售客房</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">出租客房</router-link>-->
      <!--</p>-->


      <!--</li>-->
      <!--</ul>-->
      <!--<h3 class="list_titleItem_Title">-->
      <!--<router-link to="path">客源统计报表</router-link>-->
      <!--</h3>-->
      <!--<ul>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">求购客源</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">求租客源</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<h3 class="list_titleItem_Title">-->
      <!--<router-link to="path">带看统计报表</router-link>-->
      <!--</h3>-->
      <!--<ul>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path"> 新盘带看</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">二手房带看</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">租房带看</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<h3 class="list_titleItem_Title">-->
      <!--<router-link to="path"> 成交统计报表</router-link>-->
      <!--</h3>-->
      <!--<ul>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path"> 新房成交</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">二手房成交</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path"> 租房成交</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<h3 class="list_titleItem_Title">-->
      <!--<router-link to="path">业绩统计报表</router-link>-->
      <!--</h3>-->
      <!--<ul>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">新房业绩</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path"> 二手房业绩</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--<li class="list_item_Li">-->
      <!--<p>-->
      <!--<router-link to="path">租房业绩</router-link>-->
      <!--</p>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</div>-->
      <!-- 表格 -->
      <div class="content_option">
        <ul>
          <li>
            <span>区域</span>
            <select @change="getMendian" v-model="formData.region_id" placeholder="请选择"  style="width:60%;height: 28px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in Quyu"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </li>
          <li>
            <span>门店</span>
            <select @change="getXiaozu" v-model="formData.store_id" placeholder="请选择" style="width: 60%;height: 28px;" >
              <option
                v-for="item in Mendian"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </li>
          <li>
            <span>组别</span>
            <select @change="getYuangong" v-model="formData.group_id" placeholder="请选择" style="width: 60%;height: 28px;">
              <option
                v-for="item in Xiaozu"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </li>
          <li>
            <span>员工</span>
            <select v-model="formData.agent_id" placeholder="请选择"style="width: 60%;height: 28px;">
              <option
                v-for="item in Yuangong"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </option>
            </select>
          </li>
          <li>
            <span>日期</span>
            <el-date-picker
              v-model="formData.time_start"
              type="date"
              placeholder="选择日期" style="width: 60%;height: 28px; cursor:pointer;">
            </el-date-picker>
          </li>
          <li>
            <el-date-picker
              v-model="formData.time_ends"
              type="date"
              placeholder="选择日期"style="width: 60%;height: 28px; cursor:pointer;">
            </el-date-picker>
            <div class="line"></div>
          </li>
          <div class="">
            <el-button type="primary" @click="resetSubmit" style="height: 20px;line-height: 2px;margin-top:15px;left: 10px;position: relative">重置</el-button>
          </div>
        </ul>
      </div>

      <div class="clearfix main">
        <div class="content_TableInfo">
          <table  class="table" id="table">
            <tr>
              <th colspan=4></th>
              <th colspan=3 class="setColerlu">房源统计</th>
              <th colspan=3 class="setColerlan">客源统计</th>
              <th colspan=3 class="setColercheng">跟进统计</th>
              <th colspan=4 class="setColerhui">带看统计</th>
              <th colspan=4 class="setColerhuang">成交统计</th>
              <th colspan=4 class="setColerl">业绩统计</th>
            </tr>
            <tr>
              <td>区域</td>
              <td>门店</td>
              <td>组别</td>
              <td>经纪人</td>
              <td class="setColerlu">二手房源</td>
              <td class="setColerlu">租房源</td>
              <td class="setColerlu">
                <router-link to=""> 统计</router-link>
              </td>
              <td class="setColerlan">求购客房</td>
              <td class="setColerlan">求租客房</td>
              <td class="setColerlan">
                <router-link to=""> 统计</router-link>
              </td>
              <td class="setColercheng">房源跟进</td>
              <td class="setColercheng">课源跟进</td>
              <td class="setColercheng">
                <router-link to=""> 统计</router-link>
              </td>
              <td class="setColerhui">待开发</td>
              <td class="setColerhui">售房带看</td>
              <td class="setColerhui">租房带看</td>
              <td class="setColerhui">
                <router-link to=""> 统计</router-link>
              </td>
              <td class="setColerhuang">待开发</td>
              <td class="setColerhuang">售房成交</td>
              <td class="setColerhuang">租赁成交</td>
              <td class="setColerhuang">
                <router-link to=""> 统计</router-link>
              </td>
              <td class="setColerl">新房业绩</td>
              <td class="setColerl">二手房业绩</td>
              <td class="setColerl">租赁业绩</td>
              <td class="setColerl">
                <router-link to="">统计</router-link>
              </td>
            </tr>
            <tr>
              <td>
                <router-link to="">总计</router-link>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td class="setColerlu">
                {{allcount.house_count_secondhand}}
              </td>
              <td class="setColerlu">{{allcount.house_count_rent}}</td>
              <td class="setColerlu">{{allcount.house_count_secondhandandrent}}</td>
              <td class="setColerlan">{{allcount.tourists_count_qiuzu}}</td>
              <td class="setColerlan">{{allcount.tourists_count_qiugou}}</td>

              <td class="setColerlan">{{allcount.tourists_count_qiuzuandqiugou}}</td>
              <td class="setColercheng">{{allcount.visit_house}}</td>
              <td class="setColercheng">{{allcount.visit_tourists}}</td>
              <td class="setColercheng">{{allcount.visit_houseandtrourists}}</td>
              <td class="setColerhui"></td>
              <!--带看统计-->
              <td class="setColerhui">{{allcount.is_deal_count_sell}}</td>
              <td class="setColerhui">{{allcount.is_deal_count_rent}}</td>
              <td class="setColerhui">{{allcount.see_img_count}}</td>
              <!--成交统计-->
              <td class="setColerhuang"></td>

              <td class="setColerhuang">{{allcount.is_deal_count_sell}}</td>
              <td class="setColerhuang">{{allcount.is_deal_count_rent}}</td>
              <td class="setColerhuang">{{allcount.is_deal_count}}</td>
              <td class="setColerl"></td>
              <td class="setColerl"></td>
              <td class="setColerl"></td>
              <td class="setColerl"></td>
            </tr>
            <tr v-for="item in allList.data ">
              <td>{{item.department}}</td>
              <td>{{item.department_store}}</td>
              <td>{{item.department_group}}</td>
              <td>{{item.name}}</td>
              <td class="setColerlu">{{item.house_count_secondhand}}</td>
              <td class="setColerlu">{{item.house_count_rent}}</td>
              <td class="setColerlu">
                <router-link to=""> {{item.house_count_secondhandandrent}}</router-link>
              </td>
              <td class="setColerlan">{{item.tourists_count_qiuzu}}</td>
              <td class="setColerlan">{{item.tourists_count_qiugou}}</td>
              <td class="setColerlan">
                <router-link to=""> {{item.tourists_count_qiuzuandqiugou}}</router-link>
              </td>
              <td class="setColercheng">{{item.visit_house}}</td>
              <td class="setColercheng">{{item.visit_tourists}}</td>
              <td class="setColercheng">
                <router-link to=""> {{item.visit_houseandtrourists}}</router-link>
              </td>
              <!--带看-->
              <td class="setColerhui"></td>
              <td class="setColerhui">{{item.see_img_count_sell}}</td>
              <td class="setColerhui">{{item.see_img_count_rent}}</td>
              <td class="setColerhui">
                <router-link to="">{{item.see_img_count}}</router-link>
              </td>
              <td class="setColerhuang"></td>
              <td class="setColerhuang">{{item.is_deal_count_sell}}</td>
              <td class="setColerhuang">{{item.is_deal_count_rent}}</td>
              <td class="setColerhuang">
                <router-link to=""> {{item.is_deal_count}}</router-link>
              </td>
              <!--新房-->
              <td class="setColerl">bug未开发</td>
              <td class="setColerl">bug未开发</td>
              <td class="setColerl">bug未开发</td>
              <td class="setColerl">
                <router-link to="">{{item.total}}</router-link>
              </td>
            </tr>
          </table>
          <!-- 分页 -->
          <div class="page-list">
            <el-pagination @current-change="currentChange"
                           layout="prev, pager, next" :current-page="1" :page-size="12"
                           :total="allList.total">
            </el-pagination>
          </div>
          <!-- 分页 end-->
        </div>
    </div>
    </div>
    <!-- footer -->
    <footers></footers>
    <!-- footer end-->
  </div>
</template>
<script>
  import heads from './head';
  import footers from './footer';

  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    components: {
      heads,
      footers,
    },
    data() {
      return {
        formData: {
        },
        time_dmy:'today',
        Quyu: [],
        Mendian: [],
        Xiaozu: [],
        Yuangong: [],
        allList:[],
        allcount:[],
        datas: [],
      }
    },
    methods: {
      // 导出Excal表格
      exportElex(){

        var wb = XLSX.utils.table_to_book(document.querySelector('#table'))

        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '统计.xlsx')
        } catch (e) { if (typeof console !== 'undefined'){}}
        return wbout
      },

      //日报
      todaySubmit(){
        this.time_dmy = 'today';
        this.setAllList();
      },
      //月报
      monthSubmit(){
        this.time_dmy = 'month';
        this.setAllList();
      },
      //年报
      yearSubmit(){
        this.time_dmy = 'year';
        this.setAllList();
      },
      //查询
      datacountList(){
        this.time_dmy = '';
        this.setAllList();
      },

      //重置数据
      resetSubmit(){
        this.formData = {}
      },
      // 列表获取数据
      setAllList() {
        let that = this;
        that.formData.time_dmy = that.time_dmy;
        that.$http.get('/newapi/Datacount/index', {
          params: that.formData
        }).then(res => {
          that.allList = res.data.user_list;
          that.allcount = res.data.user_allcount
        }).catch(err => {
          console.log(err)
        })
      },

      //分页
      currentChange(val) {
        let that = this;

        that.formData.page = val;
        this.$http.get('/newapi/Datacount/index', {
          params: that.formData
        })
        .then(res => {

          that.allList = res.data.user_list;
          that.allcount = res.data.user_allcount;
         // console.log(that.formData.page + '-----' + val)
          //console.log(res);
        }).catch(err => {
          console.log(err)
        })
      },

      //获取区域
      setQuyu() {
        let that = this;
        that.$http.get('/index/department', {
          params: {}
        }).then(res => {
          // console.log(res.data)
          that.Quyu = res.data;
        }).catch(err => {
          console.log(err)
        })
      },
      //获取门店
      getMendian() {
        let that = this;
        that.$http.get('/index/department', {
          params: {
            id: that.formData.region_id
          }
        }).then(res => {
          // console.log(res.data)
          that.Mendian = res.data;
        }).catch(err => {
          console.log(err)
        })
      },
      //获取小组
      getXiaozu() {
        let that = this;
        that.$http.get('/index/department', {
          params: {
            id: that.formData.store_id
          }
        }).then(res => {
          // console.log(res.data)
          that.Xiaozu = res.data;
        }).catch(err => {
          console.log(err)
        })
      },
      //获取员工
      getYuangong() {
        let that = this;
        that.$http.get('/index/department/staff_group/' + that.formData.group_id)
        .then(res=>{
          // console.log(res)
          that.Yuangong = res.data;
        }).catch(err=>{
          console.log(err)
        })
      },

    },
    created() {
      this.setQuyu();
      this.setAllList();
    }
  }
</script>
<style scoped>
  .content {
    width: 99.5%;
  }
  .el-input--prefix .el-input__inner {
    padding-left: 30px;
    width: 141px;
  }
  .header {
    height: 55px;
    margin-top: 84px;
    left: 3px;
    position: relative;
    border: 5px solid #1590ed;
  }
  .clearfix::before,
  .clearfix::after {
    content: '';
    display: block;
    line-height: 0;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  .headerTitle li {
    list-style: none;
    float: left;
    height: 10%;
    left: 10%;
    top: 8px;
    display: flex;
    width: 15%;
    position: relative;
  }

  list_titleItem_Title, a:hover, list_titleItem_Title, a:active {
    color: red;
    text-decoration: none;
  }

  .main {
    position: relative;
  }

  .content_Table table {
    width: 100%;
    text-align: center;
  }
  .content_Table table td {
    height: 20px;
  }
  /* 第二个页面 */
  .content_TableInfo {
    width: 100%;
    padding-left: 4px
  }
  .content_option span {
    display: flex;
    width: 20%;
  }
  span{
    left: 5px;
    position: relative;
    top: 5px;
  }

  .content_option li{
    list-style: none;
    float: left;
    height: 10%;
    top: 15px;
    display: flex;
    width: 15%;
    position: relative;
  }
  .content_TableInfo table {
    width: 100%;
  }
  .content_TableInfo table td {
    height: 20px;
  }
  /*!* 设置颜色 *!*/
  /*.setColerlu {*/
    /*background-color: #5A92D2;*/
  /*}*/
  /*.setColerlan {*/
    /*background-color: #3A91DC;*/
  /*}*/
  /*.setColercheng {*/
    /*background-color: #F37D3F;*/
  /*}*/
  /*.setColerhui {*/
    /*background-color: #C9C9C9;*/
  /*}*/
  /*.setColerhuang {*/
    /*background-color: #FE9C2A;*/
  /*}*/
  /*.setColerl {*/
    /*background-color: #6CC390;*/
  /*}*/
  .table {
    margin-top: 20px;
  }
  .line {
    width: 20px;
    top: 50%;
    right: 105%;
    height: 1px;
    background: #333;
    position: absolute;

  }
  select{
    cursor:pointer;
  }
  th{
    background-color: #1590ed;
    line-height: 25px;
  }
  td{
    line-height: 20px;
    border: 1px solid #a0a0a0;
  }
  .page-list{
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;
  }

</style>

